<template>
  <div class="all_list">
    <van-nav-bar
      title="人气推荐"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="count">
      <people-cart :itemObj="item" v-for="(item,index) in list" :key="index"></people-cart>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getGoods } from "../../api/home/home";
import PeopleCart from '../../components/peopleCart.vue';
export default {
  components:{PeopleCart},
  setup() {
     const data = reactive({
       list: []
     })
     getGoods().then(res => { // 获取人气推荐的列表
       data.list = res.data;
       console.log(res.data);
     })

     return{
       ...toRefs(data)
     }
  },
};
</script>
<style lang="scss" scoped>
//  在vue2里面我们使用 /deep/ 来进行穿透 在vue3 中 :deep() 来进行穿透
   :deep(.van-nav-bar .van-icon){
     color: #000;
   }
   :deep(.van-nav-bar__title){
     font-weight: normal;
   }
   .all_list{
     height: 100%;
   }
   .count{
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
     padding: 0 10px;
     justify-content: space-between;
     height: calc(100% - 50px);
     overflow: auto;
   }
  
</style>